{% extends "index.html" %}
{% block title %}商品管理{% endblock %}

{% block css %}
<style>
    #BloodSpiderBox {
        padding: 20px;
    }

    .layui-btn {
        border-radius: 4px;
    }

    .layui-form-item {
        margin-bottom: 15px;
    }

    .layui-table {
        border-radius: 4px;
        overflow: hidden;
    }

    .layui-table-header {
        background-color: #f8f8f8;
    }

    .layui-table th {
        font-weight: 600;
    }

    .layui-card {
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .layui-card-header {
        background-color: #fff;
        border-bottom: 1px solid #e6e6e6;
        padding: 15px;
        font-weight: 600;
    }

    .layui-card-body {
        padding: 15px;
    }

    .layui-upload-list {
        margin-top: 10px;
    }

    .layui-upload-img {
        max-width: 200px;
        max-height: 200px;
        border-radius: 4px;
    }

    .page-actions {
        margin-bottom: 15px;
    }

    .search-container {
        margin-bottom: 15px;
    }

    .product-image-preview {
        max-width: 80px;
        max-height: 80px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s ease;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    
    .product-image-preview:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
</style>
{% endblock %}

{% block body %}
<!-- 创建商品按钮已在创建商品.html文件中定义 -->

<!-- 搜索区域 -->
{% include "页面/商品/搜索商品.html" %}
<!-- 创建商品弹窗 -->
{% include "页面/商品/创建商品.html" %}


<!-- 商品表格 -->
<div class="layui-card">
    <div class="layui-card-header">商品列表</div>
    <div class="layui-card-body">
        <table class="layui-table" id="productTable" lay-filter="productTable"></table>
    </div>
</div>



<script>
    // 等待DOM加载完成
    document.addEventListener("DOMContentLoaded", function () {
        // 初始化商品表格
        layui.use(['table', 'form', 'layer', 'laydate', 'upload'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var $ = layui.$;
            var upload = layui.upload;

            // 渲染商品表格
            var productTable = table.render({
                elem: '#productTable',
                url: '/api/product/get_product_list/', // 商品列表API
                method: 'POST',
                page: true, // 开启分页
                limit: 10,
                limits: [10, 20, 30, 50],
                where: {
                    page_size: 10,
                    page: 1,
                    keyword: "",
                    uid: userInfo.uid
                },
                request: {
                    pageName: 'page',
                    limitName: 'page_size'
                },
                parseData: function (res) {
                    // 解析返回的数据格式
                    if (res.code === 0) {
                        return {
                            "code": 0,
                            "msg": res.message || "",
                            "count": res.data.page?.count || 0,
                            "data": res.data.page?.object_list || []
                        };
                    } else {
                        return {
                            "code": 1,
                            "msg": res.message || "数据加载失败",
                            "count": 0,
                            "data": []
                        };
                    }
                },
                cols: [[
                    { field: 'pid', title: '商品ID', width: 80, align: 'center' },
                    { field: 'name', title: '商品名称', width: 200, align: 'center' },
                    { field: 'description', title: '商品描述', minWidth: 200, align: 'center' },
                    { field: 'points', title: '商品积分', width: 100, align: 'center', sort: true },
                    { field: 'stock', title: '商品库存', width: 100, align: 'center', sort: true },
                    { field: 'sold', title: '已售数量', width: 100, align: 'center', sort: true },
                    {
                        field: 'cover_url', width: 120, title: '封面图', templet: function (d) {
                            return '<img src="' + d.cover_url + '" class="product-image-preview" alt="商品封面" data-src="' + d.cover_url + '">';
                        }, align: 'center'
                    },
                    { field: 'delivery_method', width: 120, title: '发货方式', align: 'center' },
                    { field: 'create_time', title: '创建时间', width: 180, align: 'center' },
                    { field: 'update_time', title: '更新时间', width: 180, align: 'center' },
                    { fixed: 'right', title: '操作', minWidth: 200, align: 'center', toolbar: '#productBar' }
                ]],
                text: {
                    none: '暂无商品数据'
                },
                done: function (res, curr, count) {
                    // 表格渲染完成后的回调
                    console.log('商品列表加载完成', res);
                }
            });

            // 初始化搜索功能
            searchProductInit($, productTable, form);

            // 初始化操作栏功能
            productBarInit(table, form, layer, laydate, $, upload);
            createProductPopup($, table, form, layer, laydate, upload);
            
            // 初始化图片查看功能
            initImageViewer(layer, $);
            
            // 商品创建功能已在创建商品.html文件中实现
        });
    });

    /**
     * 初始化图片查看功能
     * @param {Object} layer - layui layer 实例
     * @param {Object} $ - jQuery 实例
     */
    function initImageViewer(layer, $) {
        // 监听商品表格中的图片点击事件
        $(document).on('click', '.product-image-preview', function() {
            var imgUrl = $(this).data('src') || $(this).attr('src');
            if (imgUrl) {
                // 打开大图预览弹窗
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 1,
                    shadeClose: true,
                    skin: 'layui-layer-nobg',
                    content: '<img src="' + imgUrl + '" style="max-width: 90%; max-height: 90%; margin: 0 auto; display: block;">',
                    area: ['300px', 'auto'],
                    // 屏幕尺寸变化时调整图片大小
                    full: function(layero) {
                        // 重新计算图片大小以适应窗口
                        var img = layero.find('img');
                        img.css({
                            'max-width': '90%',
                            'max-height': '90%'
                        });
                    }
                });
            }
        });
    }
</script>
{% endblock %}